<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    
	
	<title>_${customer.customerName}_入库信息查询</title>
	<script type="text/javascript">
	
        $(function() {
		    $("#queryForm").validate(); 
			$("#_fromDate").datepicker({ format : 'yyyy-mm-dd' });
			$("#_toDate").datepicker({ format : 'yyyy-mm-dd' });
       });
       
       
       //级联商家仓库
	  function loadWarehouse(customerCode,sel_warehouse_id){
		  $("#"+sel_warehouse_id).html("");
		  $.ajax({
				type : 'post',
				url : '${ctx}/warehouse/ajaxGetWarehouse',
				data : {
					customerCode:customerCode,
					queryType:'customerAndPaiu'
				},
				dataType : 'json',
				success : function(data) {
				    var warehouseList=data.warehouseList;
				    var str="<option value='' selected='selected'></option>";
					$.each(warehouseList, function(i) {
					    var warehouse=warehouseList[i];
					    str+="<option value='"+warehouse.groupCode+"'>"+warehouse.groupName+"</option>";
					});
					$("#"+sel_warehouse_id).html(str);
					$("#"+sel_warehouse_id).trigger("chosen:updated");
					$('#_warehouseCode').val(warehouseCode);
				},
				error : function() {
					alert("网络繁忙，请稍后重试...");
				}
			});
	  }
	  
	  
  //显示入库信息详情
  function showDetail(customerCode,warehouseCode,sku){
     
      $("#info_detail").html('');
      $.ajax({
				type : 'post',
				url : '${ctx}/cusInstorageInfo/ajaxGetInfoDetai',
				data : {
					customerCode:customerCode,
					warehouseCode:warehouseCode,
					sku:sku
				},
				dataType : 'json',
				success : function(data) {
				    var infoList=data.infoList;
				    var str="";
					$.each(infoList, function(i) {
					    var info=infoList[i];
					    
					    str+="<tr>";
					    str+="<td>"+(i+1)+"</td>";
					    str+="<td>"+info.customerCode+"</td>";
					    str+="<td>"+info.warehouseCode+"</td>";
					    str+="<td>"+info.billCode+"</td>";
					    str+="<td>"+info.batchCode+"</td>";
					    str+="<td>"+info.sku+"</td>";
					    str+="<td>"+info.num+"</td>";
					    
					});
					$("#info_detail").html(str);
				},
				error : function() {
					alert("网络繁忙，请稍后重试...");
				}
			});
      
  } 
	  
    </script>
</head>

<body>
	<div style="height: 10px;"></div>
	
	<form class="form-search" id="queryForm" action="${ctx}/cusInstorageInfo/queryCusInstorageInfo" method="post">
	<table class="table table-striped table-bordered table-condensed" style="margin-top: 0px;">
		<thead>
			<th style="vertical-align: middle; color: white; " colspan="1" bgcolor="#8EB4CB">条件查询</th>
		</thead>
		<tr style="height: 50px;">
		   <td>
			    
			    <label style="margin-left: 10px;">商家</label>
				 <select  name="_customerCode"  id="_customerCode" value="${param._customerCode}"  class="required" style="width: 120px;" onchange="loadWarehouse(this.value,'_warehouseCode');">
					<option value=""></option>
					<c:forEach items="${customerList}" var="customer">
						<option value="${customer.customerCode}"
						<c:if test="${param._customerCode eq customer.customerCode}">selected=selected</c:if>
						>${customer.customerName}</option>
					</c:forEach>
				</select>
				
				<label style="margin-left:10px;">商家仓库：</label>
				<select  name="_warehouseCode"  id="_warehouseCode" value="${param._warehouseCode}" style="width: 120px;">
					<option value=""></option>
					<c:forEach items="${warehouseList}" var="wm">
						<option value="${wm.groupCode}"
						<c:if test="${param._warehouseCode eq wm.groupCode}">selected=selected</c:if>
						>${wm.groupName}</option>
					</c:forEach>
				</select>
				
			    <label style="margin-left:10px;">sku：</label> 
				<input  name="_sku"  id="_sku" value="${param._sku}"  style="width: 180px;" />
			 	
			    <button type="submit" class="btn" style="margin-left: 10px;">搜索</button>
		  </td></tr>
	      </form>
	</table>
	
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead><tr>
		    <th style="width: 100px;">序列</th>
		    <th style="width: 100px;">商家</th>
		    <th style="width: 180px;">仓库</th>
		    <th style="width: 80px;">sku</th>
			<th style="width: 80px;">入库总数（个）</th>
			<th style="width: 150px;">操作</th>
		</tr></thead>
		<tbody>
		
		<c:if test="${empty infoList or infoList.size() eq 0}">
	       <tr><td colspan="5" height="50" style="vertical-align:middle; text-align: center;color: gray;font-size: 20px;">无数据</td></tr>
	    </c:if>
		
		<c:if test="${not empty infoList}">
		<c:forEach items="${infoList}" var="info" varStatus="i">
			<tr>
			    <td>${i.count}</td>
			    <td>${info.customerCode}</td>
			    <td>${info.warehouseCode}</td>
			    <td>${info.sku}</td>
			    <td>${info.num}</td>
				<td>
				   <a href="#detail" data-toggle="modal" class="btn btn-info" onclick="showDetail('${info.customerCode}','${info.warehouseCode}','${info.sku}');">入库详情</a>
				</td>
			</tr>
		</c:forEach>
		</c:if>
		
		</tbody>
	</table>
	
	
		<!-- 入库详细 --> 
		<div style="display: none; width: 800px;  height: 500px;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="detail" >
			<div class="modal-header">
			</div>
			
			<div class="modal-body" style="height: 400px;">
			   
				 <table id="contentTable" class="table table-striped table-bordered table-condensed">
					 <thead>
						<th style="vertical-align: middle; color: white; " colspan="9" bgcolor="#8EB4CB">入库详情</th>
					</thead>
					<thead><tr>
					    <th style="width: 50px;">序列</th>
					    <th style="width: 100px;">商家</th>
					    <th style="width: 100px;">仓库</th>
					    <th style="width: 180px;">入库单号</th>
					    <th style="width: 180px;">入库批次号</th>
					    <th style="width: 80px;">sku</th>
						<th style="width: 100px;">数量（个）</th>
					</tr></thead>
				   <tbody id="info_detail"></tbody>
			</table>
			   
			</div>
			<div class="modal-footer">
				<button id="btn_cancel_single" class="btn" data-dismiss="modal" aria-hidden="true">确定</button>
			</div>
		</div>
	
</body>
</html>
